<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
	<script type="text/javascript">
	function searchUsers() {
	   loadUsers();
	}
	function putUsers(users) {
	   	$("#searchInput").autocomplete({
	        source: users
	    });
	}
	function getTheRequest() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		} else {
			isIE = true;
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function loadUsers() {
		var nameInput = $("#searchInput").val();
	    var userList = "";
	    var url = "../user/SearchNames?name=" + escape(nameInput);
		req = getTheRequest();
		req.open("GET", url, true);
		req.onreadystatechange = processRequest;
		req.send(null);
	}
	
	function processRequest() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				putUsers(req.responseXML.getElementsByTagName("users")[0].childNodes[0].textContent.split(','));
			}
		}
	}
</script>
			<div class="navmenu">
				<ul id="nav">
					<li>
						<a class="childmenu" href="../general/index"><span class="childmenutext">Inicio</span></a>
					</li>
					<c:if test="${user.admin}">
						<li>
							<span class="childmenutext">
								Usuarios
								<c:if test="${pendingRequests>0}">
									<span class="cantidadnotificaciones">
										<c:out value="${pendingRequests}" />
									</span>
								</c:if>								
							</span>
							<ul class="submenu">
								<li>
									<a href="../user/ListAdmins" class="childmenu"><span class="childmenutext">Administradores</span></a>
								</li>
								<li>
									<a href="../data/ImportUsers" class="childmenu"><span class="childmenutext">Importar Egresados</span></a>	
								</li>
								<li>
									<a href="../user/ViewPendingUserRequests" class="childmenu">
										<span class="childmenutext">
											Pedidos de Solicitud
											<c:if test="${pendingRequests>0}">
												<span class="cantidadnotificaciones">
													<c:out value="${pendingRequests}" />
												</span>
											</c:if>											
										</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<span class="childmenutext">B&uacute;squedas</span>
							<ul class="submenu">
								<li>
									<a href="../search/Search" class="childmenu"><span class="childmenutext">Nueva B&uacute;squeda</span></a>
								</li>						
								<li>
									<a href="../search/ListSavedSearches" class="childmenu"><span class="childmenutext">B&uacute;squedas Guardadas</span></a>
								</li>						
								<li>
									<a href="../data/ListSavedResults" class="childmenu"><span class="childmenutext">Perfiles de b&uacute;squeda</span></a>
								</li>						
							</ul>
						</li>
						<li>
							<span class="childmenutext">Notificaciones</span>
							<ul class="submenu">
								<li>
									<a href="../notification/SendEmail" class="childmenu"><span class="childmenutext">Enviar e-mail masivo</span></a>
								</li>
								<li>
									<a href="../notification/viewEvents" class="childmenu"><span class="childmenutext">Eventos</span></a>
								</li>
								<li>
									<a href="../notification/viewWorkPosts" class="childmenu"><span class="childmenutext">Puestos de Trabajo</span></a>
								</li>
							</ul>
						</li>
						<li>
							<span class="childmenutext">Redes Sociales</span>
							<ul class="submenu">
								<li>
									<span class="childmenutext hasSubmenu">LinkedIn</span>
									<ul class="submenu">
										<li>
											<a href="../data/matchLinkedIn" class="childmenu"><span class="childmenutext">Sincronizar</span></a>
										</li>
										<li>
											<a href="../data/matchedLinkedInResults" class="childmenu"><span class="childmenutext">Conflictos Pendientes</span></a>
										</li>
									</ul>
								</li>
								<li>
									<span class="childmenutext hasSubmenu">Facebook</span>
									<ul class="submenu">
										<li>
											<a href="../data/matchFacebook" class="childmenu"><span class="childmenutext">Sincronizar</span></a>
										</li>
										<li>
											<a href="../data/matchedFacebookResults" class="childmenu"><span class="childmenutext">Conflictos Pendientes</span></a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</c:if>
					<c:if test="${!user.admin}">
						<li>
							<a href="../user/viewProfile?userid=${user.id}" class="childmenu"><span class="childmenutext">Mi Perfil</span></a>
						</li>
						<li>
							<a href="../user/ListFriends" class="childmenu"><span class="childmenutext">Red Profesional</span></a>
						</li>
						<li>
							<a href="../user/FriendRequests" class="childmenu">
								<span class="childmenutext">
									Pedidos de Solicitud 
									<c:if test="${friendRequests>0}">
										<span class="cantidadnotificaciones">
											<c:out value="${friendRequests}" />
										</span>
									</c:if>
								</span>
							</a>
						</li>
					</c:if>
					<c:if test="${!empty user}">
						<div class="menuderecha">
							<form action="../user/SearchUser" method="post">
								<input autocomplete="off" class="focusblur" title="Buscar personas" value="Buscar personas" type="text" name="name" size="35" id="searchInput" onkeypress="searchUsers()">
								<input style="display:none;" class="boton volver color" type="submit" value="Buscar"></input>
							</form>
							<div class="saludo">
								Hola <c:out value="${user.name}" />
							</div>
							<div class="salir">
								<a href="../general/logout">[Salir]</a>
							</div>
							<div class="clear"></div>
						</div>
					</c:if>				
				</ul>
			</div>

<script type="text/javascript">
	$(document).ready(function(){
		$(".focusblur").focus(function(){
			if ($(this).val()==$(this).attr('title')) {
				$(this).val('');
				$(this).addClass('writting');
			}		
		});
		
		$(".focusblur").blur(function(){		
			if ($(this).val()=='') {
				$(this).val($(this).attr('title'));
				$(this).removeClass('writting');
			}		
		});
	});
</script>